<template>
  <div class="preOrder">
    <el-table :data="currentChargeProduct" style="width: 100%">
      <el-table-column label="充值产品" align="center">
         <template v-slot="{row}">
            <img :src="row.imageUrl" alt="" style="vertical-align:middle" width="40%">
            &nbsp;
            <span style="color:#f4c14f;font-weight:800">{{row.productName}}</span>
            <br>
            <span>{{row.description}}</span>
         </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" align="center">
         <template v-slot="{row}">
            <span class="price">{{row.price}}</span>
         </template> 
      </el-table-column>
      <el-table-column prop="quantity" label="数量" align="center">
         <template v-slot="{row}">
            <el-input-number v-model="quantity" @change="quantityChange(row)" :min="1" :max="100" label="描述文字" size="mini"></el-input-number>
         </template>
      </el-table-column>
      <el-table-column prop="address" label="小计" align="center"> 
         <template>
            <span class="total_price">{{total_fee}}</span>
         </template>
      </el-table-column>
    </el-table>
    <div class="total-fee">
			<div class="box-wrap">
				<div class="box-shadow">
					<span class="realpay--title"
						data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
					<span class="realpay--price-symbol">¥</span>
					<span class="realpay--price"
						style="color: rgb(255, 80, 0)">{{total_fee}}</span>
					<div class="order-confirmAddr">
						<div class="confirmAddr-addr-user">
							<span class="confirmAddr-title">充值详情：</span><span class="confirmAddr-pro">尊贵vip3充值-vip包月服务,心悦vip3,尊贵体验,强行踢人下线,你值得拥有</span>
						</div>
						<div class="confirmAddr-addr">
							<span class="confirmAddr-title">充值账户：</span><span class="confirmAddr-usn">{{userInfo.username}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="btn">
				<el-button @click="commitOrder"
					type="danger">提交订单</el-button>
			</div>
		</div>

  </div>
</template>
<script>
import {mapState,mapMutations} from "vuex";
import * as api from "../../../api";
export default {
   data(){
      return{
         quantity:1
      }
   },
   computed:{
      ...mapState(["currentChargeProduct","userInfo"]),
      total_fee(){//计算总价
         return this.quantity*this.currentChargeProduct[0].price
      }
   },
   methods:{
      quantityChange(row){
         console.log(row)


      },
	  ...mapMutations(["SET_ORDER_ID"]),
      commitOrder(){
		  this.$confirm('您正在提交订单', '是否确认?', '提示', {
					confirmButtonText: '提交订单',
					cancelButtonText: '取消提交',
					type: 'warning'
				}).then(() => {


					//交互效果 让用户确认提交
					//1.发起请求,提交订单,后端会返回生成的订单号
					let product_id = this.currentChargeProduct[0].product_id;
					let quantity = this.quantity
					api.preOrderApi(product_id, quantity)
						.then(res => {
							if (res.data.state) {
								//订单创建成功
								//2.跳转到支付页面,根据订单号,发送请求,获取订单详情
								let order_id = res.data.order_id;//后台返回的订单id,通过订单id可以发起支付
								this.$router.push({ name: "pay" })
								this.SET_ORDER_ID(order_id)
								//提示
								this.$message({
									type: 'success',
									message: '订单提交成功!'
								});
							} else {
								this.$message.error("订单提交失败")
							}
							// console.log(res);
						})


					//3.得到订单详情,然后还需要发送支付请求

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消提交订单'
					});
				});

      }
   }
}
</script>
<style scoped lang="less">
.preOrder{
   padding-top:20px;
}
.price{
   color:red;
   font-weight:800;
}
.total_price{
   color:red;
   font-size:16px;
}
.el-button {
	width: 180px;
	border-radius: 0;
}
.confirm-title {
	text-align: left;
	margin-bottom: 30px;
}
.pre-order {
	padding: 80px 100px 0 100px;
}
.total-fee {
	margin-top: 50px;
	text-align: right;
}
.box-wrap {
	display: inline-block;
	border: 1px solid #ff0036;
	.box-shadow {
		border: 3px solid #fff0e8;
		min-width: 300px;
		padding: 10px 5px 10px 20px;
		.realpay--title {
			font-weight: 700;
			color: #333;
		}
		.realpay--price-symbol {
			font-size: 26px;
			margin-right: 4px;
			color: #999;
		}
		.realpay--price {
			color: #ff0036;
			font: 700 26px tahoma;
		}
		.order-confirmAddr {
			line-height: 1.6;
			font-weight: bolder;
			margin-top: 10px;
			font-size: 16px;
			// text-align: center;
			// font-family: "PingFang SC";
			.confirmAddr-usn {
				color: #ff0036;
				font-size: 20px;
			}
			.confirmAddr-pro {
				color: goldenrod;
				font-size: 16px;
			}
		}
	}
}


</style>